import { provide,inject,computed, createVNode, defineComponent, onBeforeUnmount, onMounted, reactive, ref, render } from "vue";


export const DropdownItem = defineComponent({
  props: {
    label:String
  },

  setup(props, ctx) {
    
    let { label } = props;
    let hide = inject('hide')
    return () => <div class="dropdown-item" onClick={hide}>
      <span>{ label }</span>
    </div>
  }


})


const DropdownComponent = defineComponent({
  props: {
    option: { type: Object }
  },

  setup(props, ctx) {

    const state = reactive({
      option: props.option,
      isShow: false,
      top: 0,
      left: 0
    })
    ctx.expose({
      shwoDropdown(option) {
        state.option = option;
        state.isShow = true;
        let { top, left, height } = option.el.getBoundingClientRect();
        state.top = top + height;
        state.left = left;
      }

    })

    provide('hide',()=>state.isShow = false)
    const classes = computed(() => [
      'dropdown',
      {
        'dropdown-isShow': state.isShow
      }
    ])

    const styles = computed(() => {
      return { 
        top: state.top+'px',
        left: state.left + 'px'
      }
    })

    const el = ref(null) 
    const onMousedownDocument = (e) => {
      if (!el.value.contains(e.target)) {
        state.isShow = false
      }
    }
    onMounted(() => {

      document.body.addEventListener('mousedown',onMousedownDocument,true)
    })

    onBeforeUnmount(() => {
      document.body.removeEventListener('mousedown', onMousedownDocument)
    })

    return () => {
      return <div class={classes.value} style={styles.value} ref={el}>
        {state.option.content()}
      </div>
    }
  }

})


let vm;
export function $dropdown(option) {
  //element-plus中是有el-dialog组件
  // 手动挂载组件 new SubComponent.$mount()
  if (!vm) {
    let el = document.createElement('div')
    vm = createVNode(DropdownComponent, { option })  //将组件渲染成虚拟节点
    // 这里需要将e1 渲染到我们的页面中
    document.body.appendChild((render(vm, el), el))  // 渲染成真实节点扔到页面中

  }
  //将组件渲染到这个e1元素上
  let { shwoDropdown } = vm.component.exposed
  shwoDropdown(option) //其他说明组件已经有了只需要显示出来即可
}